<template>
	<div class="bg">
	
		<div class="nav banxin">
	
			<nav class="navleft">
	
				<span class="telephone">联系方式</span>
	
				<span class="moreinfo">更多详细信息</span>
	
			</nav>
	
			<nav class="navright">
	
				<span class="icon" v-for="(item , index) in icons" :key="index"><i :class="['iconfont',item.url]"></i></span>
	
			</nav>
	
			<h1 class="topleft" @click="navClick('/')">My Trip</h1>
	
			<div class="else-nav">
	
				<span v-for="(item,index) in navlink" :key="index" :class="{active : $route.path == item.path}" @click="navClick(item.path)">{{item.name}}</span>
	
			</div>
	
		</div>
	
	</div>
</template>

<script>
export default {
	data() {
		return {
			icons: [{
					url: 'icon-iconfont02fuzhi',
					path: ''
				},
				{
					url: 'icon-Iconfont_price',
					path: ''
				},
				{
					url: 'icon-iconfonticon-shebei',
					path: ''
				},
				{
					url: 'icon-iconfonticon-shebei1',
					path: ''
				}
			],
			navlink: [{
					name: '首页',
					path: '/'
				},
				{
					name: '过去',
					path: '/past'
				},

				{
					name: '计划',
					path: '/plan'
				},
				{
					name: '未来',
					path: '/future'
				},
				{
					name: '更多',
					path: '/more'
				}
			]
		}
	},
	methods: {
		navClick(e) {
			this.$router.push(e)

		}
	}
}
</script>

<style scope lang="less">
.bg {
	width: 100%;
	background-size: 100%;
	min-width: 1002px;
}

.nav {
	position: relative;
	color: white;
	background-color: transparent;
	line-height: 30px;
	display: flex;
	justify-content: space-between;
	.navleft {
		font-family: 'myFont';
		width: 300px;
		display: flex;
		justify-content: space-around;
		height: 30px;
		span {
			cursor: pointer;
			color: black;
		}
		border-bottom: 1px solid white;
	}
	.navright {
		width: 250px;
		display: flex;
		justify-content: space-around;
		height: 30px;
		span {
			cursor: pointer;
			color: black;
		}
		border-bottom: 1px solid white;
	}
}

.center-round {
	cursor: pointer;
	font-family: 'myFont';
	width: 200px;
	height: 200px;
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background-color: transparent;
	border: 2px solid white;
	border-radius: 50%;
	text-align: center;
	line-height: 30px;
}

.iconfont {
	font-size: 18px;
}

.topleft {
	cursor: pointer;
	font-family: 'myFont';
	font-size: 25px;
	position: absolute;
	top: 50px;
	left: 30px;
	font-weight: bold;
	z-index: 10;
}

.else-nav {
	position: absolute;
	top: 50px;
	right: 10px;
	width: 300px;
	display: flex;
	justify-content: space-around;
	font-family: 'myFont';
	z-index: 10;
	color: transparent;
	transition: all 0.2s;
	span {
		cursor: pointer;
		&:hover {
			color : black;
		}
	}
	&:hover {
		color: rgb(206, 221, 182) ;
	}
}

.active {
	text-decoration: underline;
	color: black;
}
</style>